<template>

    <!-- 顶部导航栏 - 使用 Vant NavBar 组件 -->
    <van-nav-bar title="民事起诉状在线生成" left-text="返回" left-arrow @click-left="goBack" fixed placeholder>
    </van-nav-bar>

    <div class="form-section">
        <!-- 步骤条 -->
        <van-steps :active="active" :length="4">
            <van-step>原告信息</van-step>
            <van-step>被告信息</van-step>
            <van-step>诉讼请求</van-step>
            <van-step>事实与理由</van-step>
        </van-steps>

        <form @submit.prevent="handleSubmit">
            <!-- 步骤1: 原告信息 -->
            <div v-show="active === 0">
                <div class="form-group">
                    <label for="yname" class="required">原告姓名</label>
                    <input type="text" id="yname" v-model="formData.yname" required>
                </div>
                <div class="form-group">
                    <label for="ygender">原告性别</label>
                    <select id="ygender" v-model="formData.ygender">
                        <option value="">请选择性别</option>
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="ynation" class="required">原告民族</label>
                    <input type="text" id="ynation" v-model="formData.ynation" required>
                </div>
                <div class="form-group">
                    <label for="ybirthdate">原告出生日期</label>
                    <input type="date" id="ybirthdate" v-model="formData.ybirthdate">
                </div>
                <div class="form-group">
                    <label for="ywork" class="required">工作单位</label>
                    <input type="text" id="ywork" v-model="formData.ywork" required>
                </div>
                <div class="form-group">
                    <label for="yphone" class="required">原告联系电话</label>
                    <input type="tel" id="yphone" v-model="formData.yphone" required>
                </div>
                <div class="form-group">
                    <label for="yadr">原告住址</label>
                    <input type="text" id="yadr" v-model="formData.yadr">
                </div>
            </div>

            <!-- 步骤2: 被告信息 -->
            <div v-show="active === 1">
                <div class="form-group">
                    <label for="bname" class="required">被告姓名</label>
                    <input type="text" id="bname" v-model="formData.bname" required>
                </div>
                <div class="form-group">
                    <label for="bgender">被告性别</label>
                    <select id="bgender" v-model="formData.bgender">
                        <option value="">请选择性别</option>
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="bnation" class="required">被告民族</label>
                    <input type="text" id="bnation" v-model="formData.bnation" required>
                </div>
                <div class="form-group">
                    <label for="bbirthdate">被告出生日期</label>
                    <input type="date" id="bbirthdate" v-model="formData.bbirthdate">
                </div>
                <div class="form-group">
                    <label for="bwork" class="required">被告工作单位</label>
                    <input type="text" id="bwork" v-model="formData.bwork" required>
                </div>
                <div class="form-group">
                    <label for="bphone">被告联系电话</label>
                    <input type="tel" id="bphone" v-model="formData.bphone">
                </div>
                <div class="form-group">
                    <label for="badr">被告住址</label>
                    <input type="text" id="badr" v-model="formData.badr">
                </div>
            </div>

            <!-- 步骤3: 诉讼请求 -->
            <div v-show="active === 2">
                <div class="form-group">
                    <label for="request" class="required">诉讼请求</label>
                    <textarea id="request" v-model="formData.request" required></textarea>
                </div>
            </div>

            <!-- 步骤4: 事实与理由 -->
            <div v-show="active === 3">
                <div class="form-group">
                    <label for="liyou" class="required">事实与理由</label>
                    <textarea id="liyou" v-model="formData.liyou" required></textarea>
                </div>
            </div>

            <!-- 导航按钮 -->
            <div class="btn-group">
                <button v-if="active > 0" type="button" @click="prevStep" class="prev-btn">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                        viewBox="0 0 16 16">
                        <path fill-rule="evenodd"
                            d="M12 8a.5.5 0 0 1-.5.5H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5a.5.5 0 0 1 .5.5z" />
                    </svg>
                    上一步
                </button>

                <button v-if="active < 3" type="button" @click="nextStep" class="next-btn">
                    下一步
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                        viewBox="0 0 16 16">
                        <path fill-rule="evenodd"
                            d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z" />
                    </svg>
                </button>

                <button v-if="active === 3" type="submit" class="submit-btn">
                    <!-- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
            <path d="M2 1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H2zm0-1h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2z"/>
            <path d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.235.235 0 0 1 .02-.022z"/>
          </svg> -->
                    AI生成预览
                </button>
            </div>
        </form>

        <!-- 重置按钮 -->
        <div class="btn-group">
            <button type="button" @click="resetForm" class="reset-btn">
                <!-- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
          <path d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
          <path d="M8 4.46V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
        </svg> -->
                重置表单
            </button>
        </div>
        <!--下载-->
        <div class="btn-group">
            <button class="download-btn" @click="generateWordDocument" :disabled="!showPreview">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                    <path
                        d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z" />
                    <path
                        d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z" />
                </svg>
                下载Word文档
            </button>
        </div>

    </div>

    <div class="preview-section">
        <!-- 预览部分保持不变 -->
        <div class="preview-content" v-if="showPreview">
            <div class="preview-header">
                <h2>民事起诉状</h2>
                <p>生成时间: {{ new Date().toLocaleString('zh-CN') }}</p>
            </div>

            <!-- 原告信息预览 -->
            <div class="info-group">
                <h3>原告信息</h3>
                <div class="info-item">
                    <div class="info-label">姓名</div>
                    <div class="info-value">{{ formData.yname || '未填写' }}</div>
                </div>
                <div class="info-item">
                    <div class="info-label">性别</div>
                    <div class="info-value">{{ formData.ygender || '未填写' }}</div>
                </div>
                <div class="info-item">
                    <div class="info-label">民族</div>
                    <div class="info-value">{{ formData.ynation || '未填写' }}</div>
                </div>
                <div class="info-item">
                    <div class="info-label">工作单位</div>
                    <div class="info-value">{{ formData.ywork || '未填写' }}</div>
                </div>

                <div class="info-item">
                    <div class="info-label">出生日期</div>
                    <div class="info-value">{{ formattedYBirthdate }}</div>
                </div>
                <div class="info-item">
                    <div class="info-label">联系电话</div>
                    <div class="info-value">{{ formData.yphone || '未填写' }}</div>
                </div>
                <div class="info-item">
                    <div class="info-label">住址</div>
                    <div class="info-value">{{ formData.yadr || '未填写' }}</div>
                </div>
            </div>

            <!-- 被告信息预览 -->
            <div class="info-group">
                <h3>被告信息</h3>
                <div class="info-item">
                    <div class="info-label">姓名</div>
                    <div class="info-value">{{ formData.bname || '未填写' }}</div>
                </div>
                <div class="info-item">
                    <div class="info-label">性别</div>
                    <div class="info-value">{{ formData.bgender || '未填写' }}</div>
                </div>
                <div class="info-item">
                    <div class="info-label">民族</div>
                    <div class="info-value">{{ formData.bnation || '未填写' }}</div>
                </div>
                <div class="info-item">
                    <div class="info-label">出生日期</div>
                    <div class="info-value">{{ formattedBBirthdate }}</div>
                </div>
                <div class="info-item">
                    <div class="info-label">联系电话</div>
                    <div class="info-value">{{ formData.bphone || '未填写' }}</div>
                </div>
                <div class="info-item">
                    <div class="info-label">住址</div>
                    <div class="info-value">{{ formData.badr || '未填写' }}</div>
                </div>
            </div>

            <!-- 诉讼请求预览 -->
            <div class="info-group">
                <h3>诉讼请求</h3>
                <div class="info-item full-width">
                    <div class="info-value">{{ formData.request || '未填写' }}</div>
                </div>
            </div>
            <div class="info-group">
                <h3>事实与理由</h3>
                <div class="info-item full-width">
                    <div class="info-value">{{ formData.liyou || '未填写' }}</div>
                </div>
            </div>
        </div>

    </div>

</template>

<script setup lang="ts">
import { reactive, computed, ref } from 'vue';
import { saveAs } from 'file-saver';
import { Document, Paragraph, TextRun, HeadingLevel, Packer } from 'docx';


// 添加返回函数
const goBack = () => {
    window.history.back();
};

// 添加 active 状态
const active = ref(0);

// 步骤导航函数
const nextStep = () => {
    if (validateCurrentStep()) {
        active.value++;
    }
};

const prevStep = () => {
    active.value--;
};

// 步骤验证函数
const validateCurrentStep = (): boolean => {
    switch (active.value) {
        case 0: // 原告信息
            if (!formData.yname || !formData.ynation || !formData.ywork || !formData.yphone) {
                alert('请填写原告所有必填信息');
                return false;
            }
            break;
        case 1: // 被告信息
            if (!formData.bname || !formData.bnation || !formData.bwork) {
                alert('请填写被告所有必填信息');
                return false;
            }
            break;
        case 2: // 诉讼请求
            if (!formData.request) {
                alert('请填写诉讼请求');
                return false;
            }
            break;
        case 3: // 事实与理由
            if (!formData.liyou) {
                alert('请填写事实与理由');
                return false;
            }
            break;
    }
    return true;
};

// 修改生成预览函数
const generatePreview = () => {
    if (!formData.yname || !formData.yphone || !formData.bname || !formData.request) {
        alert('请填写所有必填字段（带*号）');
        return;
    }
    showPreview.value = true;
};

// 修改提交处理函数
const handleSubmit = () => {
    if (validateCurrentStep()) {
        generatePreview();
    }
};

// 修改重置函数
const resetForm = () => {
    Object.keys(formData).forEach(key => {
        formData[key as keyof FormData] = '';
    });
    showPreview.value = false;
    active.value = 0; // 重置到第一步
};


interface FormData {
    yname: string;
    ygender: string;
    ynation: string;
    ywork: string;
    ybirthdate: string;
    yphone: string;
    yadr: string;

    bname: string;
    bgender: string;
    bnation: string;
    bwork: string;
    bbirthdate: string;
    bphone: string;
    badr: string;

    request: string;
    liyou: string
}

const formData = reactive<FormData>({
    yname: '',
    ygender: '',
    ynation: '',
    ywork: '',
    ybirthdate: '',
    yphone: '',
    yadr: '',

    bname: '',
    bgender: '',
    bnation: '',
    bwork: '',
    bbirthdate: '',
    bphone: '',
    badr: '',

    request: '',
    liyou: '',
});

const showPreview = ref(false);

// 格式化原告出生日期
const formattedYBirthdate = computed(() => {
    if (!formData.ybirthdate) return '未填写';
    const date = new Date(formData.ybirthdate);
    return date.toLocaleDateString('zh-CN');
});

// 格式化被告出生日期
const formattedBBirthdate = computed(() => {
    if (!formData.bbirthdate) return '未填写';
    const date = new Date(formData.bbirthdate);
    return date.toLocaleDateString('zh-CN');
});


// 生成Word文档
const generateWordDocument = async () => {
    if (!showPreview.value) {
        alert('请先生成预览');
        return;
    }

    const doc = new Document({
        sections: [{
            properties: {},
            children: [
                new Paragraph({

                    heading: HeadingLevel.HEADING_1,
                    alignment: "center",
                    spacing: { after: 400 },
                    children: [new TextRun({ text: "民事起诉状", color: "000000" })]
                }),

                new Paragraph({

                    heading: HeadingLevel.HEADING_2,
                    children: [new TextRun({ text: "原告:", color: "000000" })]
                }),
                new Paragraph({
                    children: [
                        new TextRun({ text: `\t${formData.yname}，`, bold: true, color: "000000" }),
                        new TextRun({ text: `\t${formData.ygender || '未填写'}，`, color: "000000" }),
                        new TextRun({ text: `\t${formData.ynation || '未填写'}，`, color: "000000" }),
                        new TextRun({ text: `\t工作单位：${formData.ywork || '未填写'}，`, color: "000000" }),
                        new TextRun({ text: `\t出生于：${formattedYBirthdate.value}，`, color: "000000" }),
                        new TextRun({ text: `\t联系方式：${formData.yphone || '未填写'}，`, color: "000000" }),
                        new TextRun({ text: `\t家庭住址：${formData.yadr || '未填写'}。`, color: "000000" })
                    ]
                }),

                new Paragraph({

                    heading: HeadingLevel.HEADING_2,
                    children: [new TextRun({ text: "被告:", color: "000000" })]
                }),
                new Paragraph({
                    children: [
                        new TextRun({ text: `\t${formData.bname}，`, bold: true, color: "000000" }),
                        new TextRun({ text: `\t${formData.bgender || '未填写'}，`, color: "000000" }),
                        new TextRun({ text: `\t${formData.bnation || '未填写'}，`, color: "000000" }),
                        new TextRun({ text: `\t工作单位：${formData.bwork || '未填写'}，`, color: "000000" }),
                        new TextRun({ text: `\t出生于${formattedBBirthdate.value}，`, color: "000000" }),
                        new TextRun({ text: `\t联系方式：${formData.bphone || '未填写'}，`, color: "000000" }),
                        new TextRun({ text: `\t家庭住址：${formData.badr || '未填写'}。`, color: "000000" })
                    ]
                }),

                new Paragraph({

                    heading: HeadingLevel.HEADING_2,
                    children: [new TextRun({ text: "诉讼请求:", color: "000000" })]
                }),
                new Paragraph({
                    text: formData.request,
                    spacing: { after: 200 },
                    children: [new TextRun({ text: formData.request, color: "000000" })]
                }),
                new Paragraph({

                    heading: HeadingLevel.HEADING_2,
                    children: [new TextRun({ text: "事实与理由:", color: "000000" })]
                }),
                new Paragraph({
                    text: formData.liyou,
                    spacing: { after: 200 },
                    children: [new TextRun({ text: formData.liyou, color: "000000" })]
                }),

                new Paragraph({
                    text: "  此致",
                    alignment: "left",
                    children: [new TextRun({ text: "  此致", color: "000000" })]
                }),
                new Paragraph({

                    children: [new TextRun({ text: "XXX人民法院", color: "000000" })]
                }),

                new Paragraph({

                    alignment: "right",
                    children: [new TextRun({ text: `\n\n起诉人：${formData.yname}`, color: "000000" })]
                }),
                new Paragraph({
                    // text: new Date().toLocaleDateString('zh-CN'),
                    alignment: "right",
                    children: [new TextRun({ text: new Date().toLocaleDateString('zh-CN'), color: "000000" })]
                })
            ]
        }]
    });


    try {
        const blob = await Packer.toBlob(doc);
        saveAs(blob, `民事起诉状_${formData.yname}_诉_${formData.bname}.docx`);
    } catch (error) {
        console.error('生成文档失败:', error);
        alert('生成文档失败，请重试');
    }
};
</script>

<style scoped>
/* 表单区域添加顶部内边距 */
.form-section {
    padding-top: 20px;
}

/* 移动端响应式调整 */
@media (max-width: 480px) {
    .form-section {
        padding: 15px;
    }

    /* 调整表单元素大小 */
    input,
    select,
    textarea {
        padding: 10px;
        font-size: 14px;
    }

    button {
        padding: 10px 15px;
        font-size: 14px;
    }

    /* 步骤条调整 */
    :deep(.van-steps) {
        font-size: 12px;
    }
}


/* 移动端响应式调整 */
@media (max-width: 480px) {
    .form-section {
        padding: 15px;
    }

    /* 调整表单元素大小 */
    input,
    select,
    textarea {
        padding: 10px;
        font-size: 14px;
    }

    button {
        padding: 10px 15px;
        font-size: 14px;
    }

    /* 步骤条调整 */
    .van-steps {
        font-size: 12px;
    }
}


/* 新增按钮样式 */
.prev-btn {
    background: linear-gradient(to right, #95a5a6, #7f8c8d);
    color: white;
}

.next-btn {
    background: linear-gradient(to right, #3498db, #2980b9);
    color: white;
}

/* 调整按钮组间距 */
.btn-group {
    gap: 10px;
    margin-top: 30px;
    justify-content: center;
}

/* 步骤条样式 */
.van-steps {
    margin-bottom: 30px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 响应式调整 */
@media (max-width: 768px) {
    .btn-group {
        flex-direction: column;
    }

    .btn-group button {
        width: 100%;
    }
}

/* 其余样式保持不变... */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.form-section {
    flex: 1;
    min-width: 375px;
    padding: 35px;
    background: white;
}

.preview-section {
    flex: 1;
    min-width: 400px;
    padding: 40px;
    background: #f8f9fa;
    display: flex;
    flex-direction: column;
}

h1 {
    color: #2c3e50;
    margin-bottom: 5px;
    font-size: 2.2rem;
}

h2 {
    color: #2c3e50;
    font-size: 1.8rem;
    margin-bottom: 5px;
}

h3 {
    color: #3498db;
    margin: 20px 0 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e0e0e0;
}



.form-group {
    margin-bottom: 0.5rem;
    /* 垂直间距减少66% */
}

.input-field {
    padding: 0.3rem 0.5rem;
    /* 内边距缩减40% */
}

label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #2c3e50;
}

.required::after {
    content: " *";
    color: #e74c3c;
}

input,
select,
textarea {
    width: 100%;
    padding: 14px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 16px;
    transition: all 0.3s ease;
}

input:focus,
select:focus,
textarea:focus {
    border-color: #3498db;
    outline: none;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}

textarea {
    min-height: 120px;
    resize: vertical;
}

.btn-group {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

button {
    padding: 14px 24px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.submit-btn {
    background: lightblue;
    color: white;
}

.download-btn {
    background: linear-gradient(to right, #27ae60, #2ecc71);
    color: white;
}

.reset-btn {
    background: linear-gradient(to right, #e74c3c, #c0392b);
    color: white;
}

button:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

button:active {
    transform: translateY(0);
}

button:disabled {
    background: #bdc3c7;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}


.preview-header h2 {
    color: #2c3e50;
    font-size: 1.8rem;
    margin-bottom: 5px;
}

.preview-header p {
    color: #7f8c8d;
    font-size: 1rem;
}
</style>